CSS 高频面试题精选

一、核心要点速览

💡 核心考点

盒模型: 标准盒模型 vs IE 盒模型
选择器优先级: !important > 内联 > ID > Class > Tag
布局方案: Flex、Grid、定位、浮动
响应式: 媒体查询、rem/vw 适配
BFC: 块级格式化上下文及应用

二、重要资源链接

资源	链接	说明
MDN CSS	developer.mozilla.org/zh-CN/docs/Web/CSS	最权威的 CSS 文档
CSS Tricks	css-tricks.com	CSS 技巧和示例
Can I use	caniuse.com	浏览器兼容性查询
Flexbox 游戏	flexboxfroggy.com	学习 Flexbox
Grid 游戏	cssgridgarden.com	学习 CSS Grid

三、盒模型专题

题目 1：谈谈你对 CSS 盒模型的理解

┌──────────────────────────────────────────────────────────┐
│              CSS 盒模型对比                               │
└──────────────────────────────────────────────────────────┘

两种盒模型:
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
标准盒模型 (content-box):
  ┌─────────────────────────────┐
  │         Margin              │
  │  ┌───────────────────────┐  │
  │  │       Border          │  │
  │  │  ┌─────────────────┐  │  │
  │  │  │    Padding      │  │  │
  │  │  │  ┌───────────┐  │  │  │
  │  │  │  │  Content  │  │  │  │
  │  │  │  └───────────┘  │  │  │
  │  │  └─────────────────┘  │  │
  │  └───────────────────────┘  │
  └─────────────────────────────┘
  
  width = content 宽度
  
IE 盒模型 (border-box):
  ┌─────────────────────────────┐
  │         Margin              │
  │  ┌───────────────────────┐  │
  │  │       Border          │  │
  │  │  ┌─────────────────┐  │  │
  │  │  │    Padding      │  │  │
  │  │  │  ┌───────────┐  │  │  │
  │  │  │  │  Content  │  │  │  │
  │  │  │  └───────────┘  │  │  │
  │  │  └─────────────────┘  │  │
  │  └───────────────────────┘  │
  └─────────────────────────────┘
  
  width = content + padding + border
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

标准回答：

CSS 盒模型是 CSS 布局的基础，它定义了元素如何显示以及元素之间如何相互影响。盒模型由四部分组成：内容 (content)、内边距 (padding)、边框 (border) 和 外边距 (margin)。
有两种盒模型：
标准盒模型 (content-box)：width 只包含 content 的宽度，不包括 padding 和 border
IE 盒模型 (border-box)：width 包含 content + padding + border 的总宽度
切换方式：通过 box-sizing 属性
box-sizing: content-box（默认值，标准盒模型）
box-sizing: border-box（IE 盒模型，推荐）
实际应用：
css
/* 全局使用 border-box，更方便控制布局 */
* {
  box-sizing: border-box;
}

.box {
  width: 300px;
  padding: 20px;
  border: 2px solid #000;
  /* border-box: 实际宽度 = 300px */
  /* content-box: 实际宽度 = 300 + 40 + 4 = 344px */
}
1
2
3
4
5
6
7
8
9
10
11
12
为什么推荐 border-box：
更容易计算元素的实际占用空间
添加 padding 和 border 不会改变元素大小
更符合设计师的直觉

题目 2：水平垂直居中的方法

标准回答：

CSS 水平垂直居中有很多种方法，我介绍最常用的几种：

方法一：Flexbox（推荐）

css

.parent {
  display: flex;
  justify-content: center;    /* 水平居中 */
  align-items: center;        /* 垂直居中 */
  height: 100vh;
}

方法二：Grid 布局

css

.parent {
  display: grid;
  place-items: center;  /* 同时设置水平和垂直居中 */
  height: 100vh;
}

方法三：绝对定位 + transform

css

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

方法四：绝对定位 + margin（已知宽高）

css

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 200px;
  height: 200px;
}

推荐使用 Flexbox，因为语法简单、兼容性好、支持响应式。

四、选择器与优先级

题目 3：CSS 选择器优先级如何计算？

优先级计算规则:
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
!important          > 无穷大             (最高)
内联样式            > 1,0,0,0
ID 选择器           > 0,1,0,0
类/属性/伪类        > 0,0,1,0
标签/伪元素         > 0,0,0,1
通配符             > 0,0,0,0            (最低)

比较规则:
  从左到右依次比较
  数值大的优先级高
  如果相同则后面的覆盖前面的
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

标准回答：

CSS 选择器优先级也称为"特异性"(Specificity)，它决定了当多个规则应用于同一个元素时，哪个规则会生效。
优先级计算采用四位数字表示：(a, b, c, d)
a: !important 标记（特殊标记，不参与常规计算）
b: 内联样式的数量（如 style="..."）
c: ID 选择器的数量（如 #id）
d: 类选择器、属性选择器、伪类的数量（如 .class、[type="text"]、:hover）
e: 标签选择器、伪元素的数量（如 div、::before）
常见选择器优先级排序（从高到低）：
css
/* 1. !important（最高优先级） */
.box { color: red !important; }

/* 2. 内联样式 */
<div style="color: blue;"></div>

/* 3. ID 选择器 */
#myId { color: green; }

/* 4. 类选择器 */
.myClass { color: orange; }

/* 5. 标签选择器 */
div { color: purple; }

/* 6. 通配符（最低） */
* { color: gray; }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
叠加计算示例：
css
#nav .item:hover { color: red; }    /* 0,1,1,0 */
#nav .item { color: blue; }         /* 0,1,0,0 */
.item { color: green; }             /* 0,0,1,0 */
/* 第一条规则优先级最高 */
1
2
3
4
注意事项：
不要滥用 !important，会破坏层叠机制
提高选择器 specificity 不如合理使用结构
继承的样式优先级低于直接应用的样式

题目 4：常见的 CSS 选择器有哪些？

标准回答：

CSS 选择器分为基础选择器和高级选择器：
基础选择器：
标签选择器: div, p, span
类选择器: .className
ID 选择器: #idName
通配符: *
关系选择器：
后代选择器: .parent .child（空格）
子元素选择器: .parent > .child（>）
相邻兄弟: .item + .item（+）
通用兄弟: .item ~ .item（~）
属性选择器：
css
[type="text"]        /* 精确匹配 */
[class^="icon-"]     /* 开头匹配 */
[class$="-btn"]      /* 结尾匹配 */
[class*="active"]    /* 包含匹配 */
1
2
3
4
伪类选择器：
css
:hover              /* 鼠标悬停 */
:focus              /* 获得焦点 */
:first-child        /* 第一个子元素 */
:last-child         /* 最后一个子元素 */
:nth-child(n)       /* 第 n 个子元素 */
:not(.active)       /* 否定伪类 */
1
2
3
4
5
6
伪元素选择器：
css
::before            /* 在内容前插入 */
::after             /* 在内容后插入 */
::first-letter      /* 首字母 */
::first-line        /* 首行 */
1
2
3
4

五、布局专题

题目 5：Flexbox 是什么？有哪些常用属性？

标准回答：

Flexbox（弹性盒子布局）是一种一维布局模型，专为复杂布局设计，能够自动分配空间、对齐元素。

容器属性（设置在父元素上）：

css

.container {
  display: flex;              /* 或 inline-flex */
  
  /* 主轴方向 */
  flex-direction: row;        /* row | row-reverse | column | column-reverse */
  
  /* 换行控制 */
  flex-wrap: nowrap;          /* nowrap | wrap | wrap-reverse */
  
  /* 主轴对齐方式 */
  justify-content: flex-start; /* flex-start | flex-end | center | space-between | space-around | space-evenly */
  
  /* 交叉轴对齐方式 */
  align-items: stretch;       /* stretch | flex-start | flex-end | center | baseline */
  
  /* 多行时的垂直对齐 */
  align-content: flex-start;  /* 同 justify-content */
}

项目属性（设置在子元素上）：

css

.item {
  /* 放大比例 */
  flex-grow: 0;               /* 默认 0，不放大 */
  
  /* 缩小比例 */
  flex-shrink: 1;             /* 默认 1，可缩小 */
  
  /* 基准大小 */
  flex-basis: auto;           /* auto | 具体值 */
  
  /* 简写形式 */
  flex: 0 1 auto;             /* grow | shrink | basis */
  
  /* 单独的对齐方式 */
  align-self: auto;           /* auto | stretch | flex-start | flex-end | center | baseline */
  
  /* 排列顺序 */
  order: 0;                   /* 数字越小越靠前 */
}

实际应用场景：

导航栏布局
卡片列表自适应
水平垂直居中
圣杯布局、双飞翼布局

题目 6：实现一个三栏布局（左右固定，中间自适应）

标准回答：

三栏布局是经典的布局场景，有多种实现方式：

方法一：Flexbox（推荐）

html

<div class="container">
  <div class="left">左</div>
  <div class="center">中</div>
  <div class="right">右</div>
</div>

css

.container {
  display: flex;
  height: 100vh;
}

.left, .right {
  width: 200px;
  background: lightblue;
}

.center {
  flex: 1;  /* 自动占满剩余空间 */
  background: lightgreen;
}

方法二：Grid 布局

css

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  height: 100vh;
}

.left { background: lightblue; }
.center { background: lightgreen; }
.right { background: lightpink; }

方法三：浮动 + margin（传统方法）

css

.left {
  float: left;
  width: 200px;
  background: lightblue;
}

.right {
  float: right;
  width: 200px;
  background: lightpink;
}

.center {
  margin-left: 200px;
  margin-right: 200px;
  background: lightgreen;
}

方法四：绝对定位

css

.container {
  position: relative;
}

.left, .right {
  position: absolute;
  top: 0;
  width: 200px;
  height: 100%;
}

.left { left: 0; }
.right { right: 0; }

.center {
  margin: 0 200px;
}

推荐使用 Flexbox 或 Grid，代码简洁、维护方便、支持响应式。

六、BFC 专题

题目 7：什么是 BFC？如何触发？有什么应用？

┌──────────────────────────────────────────────────────────┐
│                  BFC 特性示意                            │
└──────────────────────────────────────────────────────────┘

BFC (Block Formatting Context):
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
特性:
  ✓ 内部 Box 会在垂直方向上一个接一个放置
  ✓ Box 垂直方向的距离由 margin 决定
  ✓ 每个 Box 的左外边距碰到包含块的左边
  ✓ BFC 区域不会与 float box 重叠
  ✓ BFC 是独立容器，外部不影响内部
  ✓ 计算 BFC 高度时，浮动元素也参与计算

触发条件:
  ┌────────────────────────────────┐
  │ ✓ 根元素 (html)                │
  │ ✓ float 不为 none              │
  │ ✓ position 为 absolute/fixed   │
  │ ✓ display 为 inline-block/     │
  │   table-cell/table-caption/    │
  │   flex/grid                    │
  │ ✓ overflow 不为 visible        │
  └────────────────────────────────┘

应用场景:
  ┌────────────────────────────────┐
  │ 1. 清除浮动（防止高度塌陷）    │
  │ 2. 防止 margin 重叠            │
  │ 3. 自适应两栏布局              │
  │ 4. 阻止元素被浮动覆盖          │
  └────────────────────────────────┘
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

标准回答：

BFC（Block Formatting Context）即块级格式化上下文，它是 Web 页面中盒模型布局的 CSS 渲染模式，是一个独立的渲染区域。
BFC 的特性：
内部的 Box 会在垂直方向上一个接一个地放置
Box 垂直方向的距离由 margin 决定，属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠
每个元素的左外边距与包含块的左边界相接触（对于从右到左的字体，相应的右边）
BFC 的区域不会与 float box 重叠
BFC 是页面上的独立隔离容器，外面的元素不会影响里面的元素
计算 BFC 的高度时，浮动元素也参与计算
触发 BFC 的条件：
根元素（html）
float 不为 none
position 为 absolute 或 fixed
display 为 inline-block、table-cell、table-caption、flex、grid
overflow 不为 visible（hidden、auto、scroll 等）
实际应用场景：
1. 清除浮动（解决高度塌陷）
css
.clearfix {
  overflow: hidden;  /* 触发 BFC，包含浮动元素 */
}
1
2
3
2. 防止 margin 重叠
css
.box1 {
  margin-bottom: 20px;
}

.box2 {
  overflow: hidden;  /* 触发 BFC，margin 不会重叠 */
  margin-top: 20px;
}
1
2
3
4
5
6
7
8
3. 自适应两栏布局
css
.left {
  float: left;
  width: 200px;
}

.right {
  overflow: hidden;  /* 触发 BFC，自适应剩余空间 */
}
1
2
3
4
5
6
7
8
4. 阻止元素被浮动覆盖
css
.content {
  overflow: hidden;  /* 触发 BFC，不会被浮动元素覆盖 */
}
1
2
3

七、响应式布局

题目 8：如何实现响应式布局？

标准回答：

响应式布局是指网站能够自动适应不同设备屏幕尺寸的布局技术。

核心实现方式：

1. 媒体查询 (@media)

css

/* 移动优先策略 */
.container {
  width: 100%;
  padding: 10px;
}

/* 平板设备 */
@media (min-width: 768px) {
  .container {
    width: 750px;
    padding: 15px;
  }
}

/* 桌面设备 */
@media (min-width: 992px) {
  .container {
    width: 970px;
    padding: 20px;
  }
}

/* 大屏幕 */
@media (min-width: 1200px) {
  .container {
    width: 1170px;
    padding: 30px;
  }
}

2. 流式布局（百分比布局）

css

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.column {
  width: 50%;  /* 或使用 flex/grid */
  float: left;
}

3. 弹性图片

css

img {
  max-width: 100%;
  height: auto;
}

4. 相对单位（rem/vw/vh）

css

html {
  font-size: 16px;
}

@media (max-width: 768px) {
  html {
    font-size: 14px;  /* 小屏幕减小字体 */
  }
}

.box {
  width: 50vw;        /* 视口宽度的 50% */
  height: 50vh;       /* 视口高度的 50% */
  padding: 1rem;      /* 相对于 html 的 font-size */
}

5. 响应式框架

Bootstrap
Tailwind CSS
Ant Design Mobile

最佳实践：

采用移动优先（Mobile First）策略
使用断点（Breakpoints）：768px、992px、1200px
测试真实设备，不仅仅是浏览器缩放

八、其他高频题目

题目 9：display 有哪些值？分别有什么作用？

标准回答：

display 属性定义了元素的显示类型，常用的值包括：
块级元素：
block: 块级元素，独占一行（div、p、h1-h6）
list-item: 像块级元素，并添加列表样式（li）
行内元素：
inline: 行内元素，不独占一行（span、a）
inline-block: 行内块元素，有块级特性但不独占一行
布局相关：
flex: 弹性盒子布局
inline-flex: 行内弹性盒子
grid: 网格布局
inline-grid: 行内网格布局
table: 表格（table）
table-row: 表格行（tr）
table-cell: 表格单元格（td）
隐藏相关：
none: 完全隐藏，不占据空间
（visibility: hidden 会占据空间）
其他：
inherit: 继承父元素的 display 值
initial: 使用默认值
contents: 忽略容器本身，直接显示子元素

题目 10：position 有哪些值？分别有什么特点？

标准回答：

position 属性指定了元素的定位方法：
static（默认值）：
元素按照正常文档流排列
top、right、bottom、left、z-index 无效
relative（相对定位）：
相对于自身原始位置进行偏移
不脱离文档流，占据原空间
常作为 absolute 的定位参考
absolute（绝对定位）：
相对于最近的非 static 定位的祖先元素
如果没有，则相对于初始包含块（通常是 body）
脱离文档流，不占据空间
fixed（固定定位）：
相对于浏览器窗口（视口）定位
不随滚动条滚动
常用于回到顶部按钮、导航栏
sticky（粘性定位）：
结合了 relative 和 fixed 的特性
在跨越特定阈值前表现为 relative，之后表现为 fixed
需要指定 top、right、bottom 或 left 才生效
示例：
css
/* 回到顶部按钮 */
.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

/* 粘性导航 */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
}
1
2
3
4
5
6
7
8
9
10
11
12
13

九、记忆口诀

CSS 面试题歌诀：

盒模型有两种，
standard 和 border。
content-box 是标准，
border-box 更实用！

选择器优先级，
Important 是第一。
内联 ID 和 Class，
标签伪类排最后！

Flex 布局很简单，
display 设 flex。
justify 管主轴，
align-items 管交叉！

BFC 要记牢，
overflow 来触发。
清除浮动防重叠，
布局优化少不了！

响应式怎么做，
@media 媒体查。
rem vw 相对单位，
移动优先适配它！

十、总结一句话

盒模型: content-box vs border-box = 布局基础 📦
选择器: 优先级计算 = 样式覆盖关键 ⭐
Flexbox: 一维弹性布局 = 现代布局首选 🎯
BFC: 块级格式化上下文 = 解决布局难题 🔧
响应式: 媒体查询 + 相对单位 = 多端适配必备 📱

CSS 高频面试题精选 ​

一、核心要点速览 ​

二、重要资源链接 ​

三、盒模型专题 ​

题目 1：谈谈你对 CSS 盒模型的理解 ​

题目 2：水平垂直居中的方法 ​

四、选择器与优先级 ​

题目 3：CSS 选择器优先级如何计算？ ​

题目 4：常见的 CSS 选择器有哪些？ ​

五、布局专题 ​

题目 5：Flexbox 是什么？有哪些常用属性？ ​

题目 6：实现一个三栏布局（左右固定，中间自适应） ​

六、BFC 专题 ​

题目 7：什么是 BFC？如何触发？有什么应用？ ​

七、响应式布局 ​

题目 8：如何实现响应式布局？ ​

八、其他高频题目 ​

题目 9：display 有哪些值？分别有什么作用？ ​

题目 10：position 有哪些值？分别有什么特点？ ​

九、记忆口诀 ​

十、总结一句话 ​

CSS 高频面试题精选

一、核心要点速览

二、重要资源链接

三、盒模型专题

题目 1：谈谈你对 CSS 盒模型的理解

题目 2：水平垂直居中的方法

四、选择器与优先级

题目 3：CSS 选择器优先级如何计算？

题目 4：常见的 CSS 选择器有哪些？

五、布局专题

题目 5：Flexbox 是什么？有哪些常用属性？

题目 6：实现一个三栏布局（左右固定，中间自适应）

六、BFC 专题

题目 7：什么是 BFC？如何触发？有什么应用？

七、响应式布局

题目 8：如何实现响应式布局？

八、其他高频题目

题目 9：display 有哪些值？分别有什么作用？

题目 10：position 有哪些值？分别有什么特点？

九、记忆口诀

十、总结一句话